<m-card [autoHeight]="true">
    <div card-head>
        <div class="g-card-title">接收人</div>
        <button class="btn btn-secondary" (click)="zoneSelect.open()">
			<ng-container *ngIf="zoneSelectControl.value as zones">
				<ng-container *ngIf="zones.length; else selectZoneDefaultRef">
					{{ zones[0].id === 0 ? '全部区域' : zones[0].name }}
				</ng-container>
			</ng-container>
			<ng-template #selectZoneDefaultRef>选择区域</ng-template>
		</button>
        <m-zone-select-input [formControl]="zoneSelectControl" hidden #zoneSelect></m-zone-select-input>
    </div>
    <div>
        <div>
            <m-key-search #selectRef></m-key-search>
        </div>
        <div>
            <m-api-data-table [dataSource]="personnelAPI$ | async" [selection]="personnelSelection" [searchControl]="selectRef" [markSelected]="
					zoneSelectControl.value?.length === 1 && zoneSelection.isSelected(zoneSelectControl.value[0])
				">
                <ng-container mDataTableColumn [header]="'角色'">
                    <ng-template let-type="utype">
                        <td>
                            <m-user-type-text [type]="type"></m-user-type-text>
                        </td>
                    </ng-template>
                </ng-container>
                <ng-container mDataTableColumn [header]="'姓名'">
                    <ng-template let-name="full_name">
                        <td>{{ name }}</td>
                    </ng-template>
                </ng-container>
                <ng-container mDataTableColumn [header]="'工号'">
                    <ng-template let-number="job_number">
                        <td>{{number}}</td>
                    </ng-template>
                </ng-container>
                <ng-container mDataTableColumn [header]="'状态'">
                    <ng-template let-status="status">
                        <td>
                            <m-user-status-text [status]="status"></m-user-status-text>
                        </td>
                    </ng-template>
                </ng-container>
                <ng-container *ngIf="zoneSelectControl.value as zones">
                    <ng-container *ngIf="zones.length">
                        <mat-checkbox [ngModel]="zoneSelection.isSelected(zones[0])" (ngModelChange)="zoneSelection.trigger(zones[0])">
                            选择区内所有人员
                        </mat-checkbox>
                    </ng-container>
                </ng-container>
            </m-api-data-table>
        </div>
    </div>
</m-card>